import React, { useCallback, useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import Page from '../../components/Page';
import PageHeader from '../../components/PageHeader';
import Spacer from '../../components/Spacer';
import HomeCard from './components/HomeCard';
import useBasisCash from '../../hooks/useBasisCash';
import config from '../../config';
import Notice from '../../components/Notice';
import TokenSymbol from '../../components/TokenSymbol';
import { Link } from 'react-router-dom'

import bg_index from '../../assets/image/banner_Metaverse.png';
import bg_index_h5 from '../../assets/image/h5banner_Metaverse.png';

import supers from '../../assets/image/super.png';
import bigbang from '../../assets/image/bigbang.png';
import pulsar from '../../assets/image/pulsar.png';

const Home: React.FC = () => {
  

  return (
    <Page>
      <StylehCont>
      <StyleDiv1>
        <img
          src={bg_index}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv1>
      <StyleDiv2>
        <img
          src={bg_index_h5}
          alt='logo'
          style={{width: '100%', height: 'auto'}}
        />
      </StyleDiv2>

    

      <CardWrapper>
      <CardWrapper1> 
        <StyledNoticeContainer to="/"> 
      <img
          src={supers}
          alt='logo'
          style={{width: '100%', height: 'auto', marginTop: 2}}
        />
        </StyledNoticeContainer>

        <StyledNoticeContainer1> 
          
<img
          src={bigbang}
          alt='logo'
          style={{width: '100%', height: 'auto', marginTop: 2}}
        />
        </StyledNoticeContainer1>

<StyledNoticeContainer1 > 
<img
          src={pulsar}
          alt='logo'
          style={{width: '100%', height: 'auto', marginTop: 2}}
        />
        </StyledNoticeContainer1>
        </CardWrapper1>

      </CardWrapper>
      
      </StylehCont>
    </Page>
  );
};

const StyleDiv1 = styled.div`
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  // margin-top: -70px;
  @media (max-width: 768px) {
    display: none;
  }
`

const StyleDiv2 = styled.div`
  display: none;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  z-index: -1;
  margin-top: -70px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StylehCont = styled.div`
  background: "#100428"
`;

const Stylesubtitle = styled.p`
color: #FFFFFF;
font-size: 18px;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
`

const StyledOverview = styled.div`
  align-items: center;
  display: flex;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
  }
`;

const CardWrapper = styled.div`
  display: flex;
  
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 0px;
  }
`;

const CardWrapper1 = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 80%;
  margin-top: 40px;
  @media (max-width: 768px) {
    width: 100%;
    flex-flow: column nowrap;
    align-items: center;
    margin-top: 0px;
  }
`;

const StyledNoticeContainer = styled(Link)`
  opacity: 1;
  cursor: pointer;
  &:hover {
    opacity: 1;
  }
`;

const StyledNoticeContainer1 = styled.div`
  opacity: 0.8;
  cursor: pointer;
  margin-top: 20px;
  &:hover {
    opacity: 1;
  }
  @media (max-width: 768px) {
    margin-top: 0px;
  }
`;

const StyledSpacer = styled.div`
  height: ${(props) => props.theme.spacing[4]}px;
  width: ${(props) => props.theme.spacing[4]}px;
`;

const StyledLink = styled.a`
  font-weight: 700;
  text-decoration: none;
  color: ${(props) => props.theme.color.primary.main};
`;

export default Home;
